@import "colors.scss";
.portfolio {
    .h1 {
        color:$main-text;
        font-size: 48px;
        font-weight: 600;
    }
    .text-out {
        color: $gray-400;
        font-size: 18px;
    }
    .p1 {
        font-size: 12px;
        font-weight: 500;
        color: $gray-400;
    }
    .p2 {
        font-size: 18px;
        font-weight: 600;
        color: $main-text;
    }
    .p3 {
        font-size: 14px;
        color: $gray-600;
    }
    .card-img-top {
        max-height: 248px;
        width: 100%;
    }
    .card {
        max-width: 424px;
        width: 100%;
        height: 550px;
    }
    .card:hover {
        box-shadow: 0 .5rem 1rem rgba(black, .15);
    }
    .colored-btn {
        background-color: $primary_color_btn;
        border-color: $primary_color_btn;
        color: white;
    }
    .colored-btn:hover {
        background-color: $secondary_color_btn;
        border-color: $secondary_color_btn;
        color: white;
    }
    .colored-btn:active {
        background-color: $secondary_color_btn !important;
        border-color: white !important;
        color: white !important;
    }
    .uncolored-btn {
        color: $primary_color_btn;
        border-color: $primary_color_btn;
    }
    .uncolored-btn:hover {
        color: $secondary_color_btn;
        border-color: $secondary_color_btn;
    }
    .uncolored-btn:active {
        color: $secondary_color_btn !important;
    }
    .lets-work {
        background-color: #132238;
    }
    h2 {
        color: white;
        font-size: 48px;
        font-weight: 600;
    }
    .work-text {
        color: $gray-300;
        font-size: 18px;
    }
}
